<template>
  <div class="head" v-for="(item, i) in introduction" :key="i">
    <h2 v-if="i==0">{{$route.query.name}}简介</h2>
    <h2 v-else>{{item.ti}}</h2>
    <p :class="[i!=0?'indent':'']" v-html="item.txt"></p>
  </div>
</template>

<script>
export default {
  name: 'info',
  data () {
    return {
      id: this.$route.query.id,
      introduction: [],
    }
  },
  methods: {
    async info () {
      const { data: info } = await this.$http.get('artist/desc', {
        params: {
          id: this.id
        }
      })
      if (info.code == 200) {
        let author = { ti: info.briefDesc.split('，')[0], txt: info.briefDesc }
        info.introduction.forEach((element, i) => {
          if (element.ti == '主要成就') {
            let li = info.introduction[i].txt.split('\n')
            let txt = ''
            li.forEach((e) => {
              txt = txt + e
              txt = txt + '<br />'
            })
            info.introduction[i].txt = txt
          }
        });
        this.introduction = [author, ...info.introduction]
      }
    }
  },
  created () {
    this.info()
  },
}
</script>

<style lang='less' scoped>
.head {
  margin-top: 30px;
  h2 {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
  }
  p {
    text-indent: 2em;
    line-height: 25px;
    color: #666;
  }
  .indent {
    text-indent: 0;
  }
}
</style>